<extend name="Public/base"/>
<block name="style">
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/lib/magnific/magnific-popup.css"/>
    <link href="__PUBLIC__/lib/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
    <link href="__ZUI__/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
    <style>
    .web_uploader_picture_list {
        background: #eee;
        content: "无图";
        margin-top: 10px;
        border: 1px solid #eee;
        width: 150px;
        height: 100px;
        overflow: hidden;
    }

    .web_uploader_picture_list img {
        width: 150px;
        height: 100px;
    }

    #data-table {
        list-style: none;
        padding-left: 0;
    }

    #data-table li {
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
        padding-top: 10px;
        background: #f6f6f6;
        margin-bottom:5px;
        border-radius: 4px;
        border:1px solid #f2f2f2;
    }

    #data-table .dragging {
        background-color: #fff4e5;
        opacity: 0.35;
    }

    .data-header {
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
    }
    .editBtn {
        display:table-cell;
        height: 92px;  
        text-align: center;
    }
    .editBtn:before{
         content: ".";
         height: 100%;
         display: inline-block;
         vertical-align: middle;
         visibility: hidden;
    }
    </style>
</block>
<block name="body">
    
    <!-- 标题 -->
    <div class="main-title">
        <h2>
            {$_meta_title}
        </h2>
    </div>
    <!-- 数据表格 -->
    <div class="with-padding">
        <div class="tab-wrap" style="margin-bottom: 5px">
            <ul class="nav nav-secondary group_nav">
            </ul>
        </div>

        <form action="{:U('editadv?pos_id='.$pos['id'])}" method="post" class="form-horizontal">
            <label class="item-label">所属广告位： </label>
            <div class="controls ">
                <input type="hidden" name="pos_id" value="{$pos.id}"  readonly/>
                <div style="margin-bottom: 15px">
                <span class="label label-success">广告名：{$pos.title}</span>
                <span class="label label-danger">标识：{$pos.name}</span>
                <span class="label">路径：{$pos.path}</span>
                </div>
            </div>
            

            <label class="item-label">图片列表： </label>
            <input name="type" type="hidden" value="2">
            <a class="btn btn-success" onclick="builder.add('#data-table')"><i class="icon-plus"></i> 添加广告</a>
            <ul id="data-table">
                <volist name="list" id="vo">
                    <li class="line clearfix">
                        <div class="col-xs-2">
                            <span id="web_uploader_wrapper_{$i}">选择图片</span>
                            <input id="web_uploader_input_{$i}" name="pic[]" type="hidden" value="{$vo.pic}"
                                   event-node="uploadinput">

                            <div id="web_uploader_picture_list_{$i}" class="web_uploader_picture_list">
                                <img src="{$vo.pic|pic}">
                            </div>
                        </div>
                        <div class="col-xs-10">
                            <div class="row">
                            <div class="col-xs-2">标题 
                                <input type="text" name="title[]" value="{$vo.title}"
                                       class="text input-large form-control" style="width: 100%"/>
                            </div>
                            <div class="col-xs-2">Url
                                <input type="text" name="url[]" value="{$vo.url}"
                                       class="text input-large form-control" style="width:  100%"/>
                            </div>
                            <div class="col-xs-2">生效时间
                                <input type="hidden" name="start_time[]" value="{$vo.start_time}"/>

                                <input type="text" data-field-name="start_time"
                                       class="text input-large form-datetime time form-control"
                                       style="width: 130px" value="{$vo.start_time|date='Y-m-d H:i',###}"
                                       placeholder="请选择时间"/>

                            </div>
                            <div class="col-xs-2">失效时间
                                <input type="hidden" name="end_time[]" value="{$vo.end_time}"/>
                                <input type="text" data-field-name="end_time"
                                       class="text input-large form-datetime time form-control"
                                       style="width: 130px" value="{$vo.end_time|date='Y-m-d H:i',###}"
                                       placeholder="请选择时间"/>
                            </div>
                            <div class="col-xs-2">打开方式
                                <select id="target_{$vo.id}" name="target[]" class="form-control" style="width: 100%">
                                    <option value="_blank" selected>新窗口:_blank</option>
                                    <option value="_self">当前层:_self</option>
                                    <option value="_parent">父框架:_parent</option>
                                    <option value="_top">整个框架:_top</option>
                                </select>
                                <script>
                                    $('#target_{$vo.id}').val("{$vo.target}")
                                </script>
                            </div>

                            <div class="col-xs-2">
                                排序
                                <input type="text" name="sort[]" value="{$vo.sort}"
                                       class=" text input-large form-control" style="width: 40px"/>
                            </div>

                            <div class="col-xs-6"><div>描述</div>
                                <textarea name="description[]" class="form-control" rows="3" placeholder="广告描述">{$vo.description}</textarea>
                            </div>
                            <div class="col-xs-6">
                                <div class="editBtn">
                                    <a class="btn btn-danger btn-xs" onclick="builder.remove(this)"><i
                                            class="icon-trash"></i> 删除</a>
                                    <a href="javascript:" class="btn btn-warning sort-handle btn-xs"><i class="icon-move"></i>
                                        移动
                                    </a>
                                </div>
                            </div>
                            </div>
                        </div>
                    </li>
                </volist>
            </ul>
            <br/>

            <div class="form-item">
                <button class="btn btn-success submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal" style="width: 100px">确定</button>
                &nbsp;
                <a class="btn btn-default" href="{:U('adv?pos_id='.$pos['id'])}">返回广告管理</a>
                &nbsp; <a class="btn btn-danger" onclick="builder.init()">清空并重置
            </a></div>
        </form>
    </div>

    <script id="line-tpl" style="display: none" type="text/html">
        <li class="line clearfix">
        <div class="col-xs-2">
        </div>
        <div class="col-xs-10">
            <div class="row">
                <div class="col-xs-2">标题 
                    <input type="text" name="title[]" value="{$data.title}"
                           class="text input-large form-control" style="width: 100%"/>
                </div>
                <div class="col-xs-2">Url
                    <input type="text" name="url[]" value="{$data.url}"
                           class="text input-large form-control" style="width:  100%"/>
                </div>
                <div class="col-xs-2">生效时间
                    <php>$start=time();</php>
                    <input type="hidden" name="start_time[]" value="{$start}"/>

                    <input type="text" data-field-name="start_time"
                           class="text input-large form-datetime time form-control"
                           style="width: 130px" value="{$start|date='Y-m-d H:i',###}"
                           placeholder="请选择时间"/>

                </div>

                <div class="col-xs-2">失效时间
                <php>$end=time()+7*60*60*24;</php>
                    <input type="hidden" name="end_time[]" value="{$end}"/>
                    <input type="text" data-field-name="end_time"
                           class="text input-large form-datetime time form-control"
                           style="width: 130px" value="{$end|date='Y-m-d H:i',###}"
                           placeholder="请选择时间"/>
                </div>

                <div class="col-xs-2">打开方式
                    <select id="target_{$data.id}" name="target[]" class="form-control" style="width: 100%">
                        <option value="_blank" selected>新窗口:_blank</option>
                        <option value="_self">当前层:_self</option>
                        <option value="_parent">父框架:_parent</option>
                        <option value="_top">整个框架:_top</option>
                    </select>

                </div>

                <div class="col-xs-2">
                    排序
                    <input type="text" name="sort[]" value="{$data.sort}"
                           class=" text input-large form-control" style="width: 80px"/>
                </div>
                <div class="col-xs-6">
                <div>描述</div>
                    <textarea name="description[]" class="form-control" rows="3" placeholder="广告描述">{$data.description}</textarea>
                </div>
                <div class="col-xs-6">
                    <div class="editBtn">
                        <a class="btn btn-danger btn-xs" onclick="builder.remove(this)"><i
                                class="icon-trash"></i> 删除</a>
                        <a href="javascript:" class="btn btn-warning sort-handle btn-xs"><i class="icon-move"></i>
                            移动
                        </a>
                    </div>
                </div>
            </div>
        </div>
        </li>
    </script>


    <!-- 分页 -->
    
    <script type="text/javascript" src="__ZUI__/lib/datetimepicker/datetimepicker.min.js"></script>
    <script type="text/javascript" src="__ZUI__/lib/droppable/droppable.min.js"></script>
    <script type="text/javascript" src="__ZUI__/lib/sortable/zui.sortable.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/lib/webuploader/js/webuploader.js"></script>
    <script>
        var builder = {
            'uploaders': [],
            'index': 1,
            'sortable': function () {
                $('#data-table').sortable({
                    trigger: '.sort-handle', 
                    selector: 'li',
                    dragCssClass: '',
                    finish: function () {
                        // builder.sortable();
                        builder.refresh_order();
                    }
                });
            },
            'refresh_order': function () {
                $('#data-table li').each(function (index, element) {
                    $(this).attr('data-order', index);
                    $(this).find('input[name*=sort]').val($(this).attr('data-order'));
                })
            },
            'init': function () {
                var $html = $($('#line-tpl').html());
                $('#data-table').html($html);
                builder.createWebUpload($html, $html);
                initTimePicker();

                builder.sortable();
                builder.refresh_order();
            },
            'add': function (obj) {
                var $this = $(obj);
                var $html = $($('#line-tpl').html());
                $(obj).prepend($html);
                builder.createWebUpload($html, $(obj+ 'li:eq(0)'));
                //$html.insertAfter($this.parent().parent().parent().parent().parent());
                //builder.createWebUpload($html, $this.parent().parent().parent().parent().parent());
                initTimePicker();

                builder.sortable();
                builder.refresh_order();
                bind_time_change();

            },
            'remove': function (obj) {
                $(obj).parent().parent().parent().parent().parent().remove();
                builder.sortable();
                builder.refresh_order();

            },
            'createWebUpload': function ($html, $parent_parent) {
                var id = builder.index++;
                $html.find('div:eq(0)').html(
                    '<span id="web_uploader_wrapper_' + id + '">选择图片</span>\
                    <input id="web_uploader_input_' + id + '" name="pic[]" type="hidden" value=""\
                    event-node="uploadinput">\
                    <div id="web_uploader_picture_list_' + id + '" class="web_uploader_picture_list">\
                    </div>'
                );
                $html.insertAfter($parent_parent);
                builder.createUploader(id);
            },
            'createUploader': function (id_origin) {
                var id = "#web_uploader_wrapper_" + id_origin;
                var uploader = WebUploader.create({
                    // swf文件路径
                    swf: 'Uploader.swf',
                    // 文件接收服务端。
                    server: U('Home/File/uploadPicture'),
                    fileNumLimit: 5,
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: {'id': id, 'multi': false}
                });

                uploader.on('fileQueued', function (file) {
                    uploader.upload();
                    $("#web_uploader_file_name_" + id_origin).text('正在上传...');
                });

                /*上传成功*/
                uploader.on('uploadSuccess', function (file, ret) {
                    if (ret.status == 0) {
                        $("#web_uploader_file_name_" + id_origin).text(ret.info);
                        toast.error(ret.info);
                    } else {
                        $('#web_uploader_input_' + id_origin).focus();
                        $('#web_uploader_input_' + id_origin).val(ret.data.file.id);
                        $('#web_uploader_input_' + id_origin).blur();

                        $("#web_uploader_picture_list_" + id_origin).html('<img src="' + ret.data.file.path + '"/>');
                    }
                });
                builder.uploaders.push(uploader);
            }
        };
        builder.sortable();//默认执行一次

        function initTimePicker() {
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('.form-time').datetimepicker({
                language: "zh-CN",
                minView: 0,
                startView: 1,
                autoclose: true,
                format: 'hh:ii'
            });
            bind_time_change();

        }
        function bind_time_change() {
            $('.time').change(function () {
                var dateString = $(this).val();
                var date = new Date(dateString);
                var timestamp = date.getTime();
                $(this).prev().val(Math.floor(timestamp / 1000));
            });
        }
    </script>
    <script>
        $(function () {
            var children = $('#data-table').children();
            if (children.length == 0) {
                builder.init();

            } else {
                for (var i = 0; i < children.length; i++) {
                    builder.createUploader(i + 1);
                }

                builder.index = i + 1;
                initTimePicker();
                bind_time_change();
            }

        })
    </script>
</block>